<template>
  <div>
    <section>
      <!--工具条-->
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true" >
          <el-form-item>
            <el-input  placeholder="姓名" v-model="keyWorld"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchShop">查询</el-button>
          </el-form-item>

          <!--          导入数据-->



        </el-form>
      </el-col>

      <!--列表-->
      <template>
        <el-table :data="shopList" highlight-current-row v-loading="loading" style="width: 100%;" >
          <el-table-column
              type="selection">
          </el-table-column>

          <el-table-column prop="id" label="商铺id" >
          </el-table-column>

          <el-table-column prop="name" label="商铺名称" >
          </el-table-column>


          <el-table-column prop="tel" label="商品电话" >
          </el-table-column>

          <el-table-column prop="registerTime" label="注册时间" >
          </el-table-column>

          <el-table-column label="状态" :formatter="stateFormat">
          </el-table-column>


          <el-table-column prop="address" label="地址" >
          </el-table-column>



          <el-table-column  label="logo" >
            <template slot-scope="scope">
              <el-image
                  v-for="item in getImgList(scope.row)"
                  style="width: 50px; height: 50px;margin-left: 5px"
                  :src="item">
              </el-image>
            </template>
          </el-table-column>






          <el-table-column
              fixed="right"
              label="操作">
            <template slot-scope="scope">
              <el-button  type="text" size="small" @click="showDetailsInfo(scope.row)">查看详情</el-button>
              <el-button  type="text" size="small" @click="addAudit(scope.row)">审核</el-button>
              <el-button  type="text" size="small">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
        <el-row type="flex">
          <el-col :span="20" >
            <el-pagination
                background
                layout="total, sizes, prev, pager, next"
                :current-page="1"
                :page-size.sync="size"
                :page-sizes="[5,6,7,8]"
                :total="total">
            </el-pagination>
          </el-col>
          <el-col :span="4" :push="2">
            <el-button type="danger" icon="el-icon-delete">批量删除</el-button>
          </el-col>
        </el-row>
      </template>

    </section>
<!--    审核店铺对话框-->
    <el-dialog title="审核商铺" :visible.sync="audiShopDialog" :append-to-body="true" ref="auditDialog" >

      <el-form ref="form" :model="form" label-width="80px"  >
        <el-form-item label="店铺名称">
          <el-input v-model="form.name" :disabled="true" :v-loading="true"></el-input>
        </el-form-item>


        <el-form-item label="审核类型">
          <el-select v-model="form.operateType" placeholder="审核类型">
            <el-option   label="通过" :value="2" ></el-option>
            <el-option   label="驳回" :value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="审核意见">
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="form.note">
          </el-input>
        </el-form-item>

<!--        审核历史-->
        <div class="history">
          <el-alert
              style="margin-top: 10px"
              v-for="item in auditListL"
              :title="item.title"
              :type="item.type"
              :description="item.message"
              show-icon>
          </el-alert>


        </div>
        <el-form-item>
          <el-button type="primary" @click="audit">提交</el-button>
          <el-button @click="audiShopDialog=false">取消</el-button>
        </el-form-item>


      </el-form>
    </el-dialog>

<!--    查看店铺详情-->
    <el-dialog title="查看店铺详情" :visible.sync="showShopDetails" :append-to-body="true" >

      <el-form ref="form" :model="form" label-width="80px">

        <el-form-item label="店铺名称">
          <el-input v-model="showDetails.name" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="店铺地址">
          <el-input v-model="showDetails.address" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="店铺座机">
          <el-input v-model="showDetails.phone" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="店铺logo">
          <el-row type="flex">
            <el-col  :span="4" v-for="item in showDetails.shopImgList">
              <el-image
                  style="width: 100px; height: 100px"
                  :src="item">
              </el-image>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="当前状态">
        <el-steps :active="showDetails.state-1" finish-status="success" simple style="margin-top: 20px">
          <el-step title="待审核"></el-step>
          <el-step title="审核通过" ></el-step>
          <el-step title="激活"></el-step>
        </el-steps>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>

</template>
<script>
import {getShopList,getShopAuditList} from "@/api/shop";
import {addShopLog} from "@/api/shopLog";
export default {
  name: "shop",
  data(){
    return{
      showShopDetails:false,
      auditListL:[],
      showDetails:{
        shopImgList:[],
        name:'',
        address:'',
        phone:'',
        state:0,
      },
      form:{
        shopId:null,
        name:null,
        operateType:2,
        note:''
      },
      audiShopDialog:false,
      keyWorld:'',
      page:1,
      size:5,
      total:0,
      loading:true,
      shopList:[]
    }
  },
  methods:{
    //用户审核
    audit(){
      let obj ={
        shopId:this.form.shopId,
        operateType:this.form.operateType,
        note:this.form.note
      }
      //用户审核
      addShopLog(obj).then(resp=>{
        if (resp.data.code==200){
          this.$message({
            message:resp.data.msg,
            type:'success'
          })
        }
        else this.$message({
          message:resp.data.msg,
          type:'error'
        })
        //关闭审核对话框
        this.audiShopDialog=false;
      })

    },
    //查看详情
    showDetailsInfo(row){
      this.showDetails.shopImgList=[];
      //显示对话框
      this.showShopDetails=true;
      //获取图片链接
      let split = row.logo.split(',');

        for (let i = 0; i < split.length; i++) {
          this.showDetails.shopImgList.push(split[i])
        }
        this.showDetails.name=row.name;
        this.showDetails.state=row.state;
        this.showDetails.address=row.address;
        this.showDetails.phone=row.tel;
    },
    //获取图片列表
    getImgList(row){
      let imgList=[];
      let log = row.logo;
      let split = log.split(',');
      for (let i = 0; i < split.length; i++) {
        imgList.push(split[i])
      }
      return imgList;
    },
    //审核对话框
    addAudit(row){
      //设置当前商铺的id
      this.form.shopId=row.id;
      //回显数据
      this.form.name=row.name
      //获取店铺的审核记录
      getShopAuditList(row.id).then(resp=>{
        this.auditListL=[]
        //
        if (resp.data.code==200){
          //处理数据 拼接字符串
          let list = resp.data.data;
          for(let i = 0 ;i<list.length;i++){
            let  message = " ";
            let obj = list[i];
            message+=obj.note;
            let notInfo ={
              title:obj.operateName,
              message:message,
              type: obj.operateType==1?'info':obj.operateType==2?'success':'error'
            }
            this.auditListL.push(notInfo)
          }
        }
      })
      //打开当前对话框
      this.audiShopDialog=true;
    },
    //状态格式化
    stateFormat(row){
      if (row.state==1) return"待审核";
      else if (row.state==2) return "审核通过";
      else if (row.state==3) return "激活成功";
      else if (row.state==4) return "驳回";
    },

    searchShop(){

    },
    loadingShopList(){
      this.loading=true;
      getShopList(this.page,this.size).then(resp=>{
        if (resp.data.code==200){
          this.$message({
            message:resp.data.msg,
            type:'success'
          })
          this.shopList=resp.data.data;
          this.loading=false;
        }
        else this.$message({
          message:resp.data.msg,
          type:'error'
        })
      })
    }
  },
  mounted() {
    //加载商铺信息
    this.loadingShopList();

  }
}
</script>

<style scoped>

</style>